import { FC, useState } from "react";
import styles from "./Common.module.scss";
import QuestionCard from "../../components/QuestionCard";
import { Typography, Empty } from "antd";
const { Title } = Typography;
const questionList = [
  {
    _id: "q1",
    title: "问卷1",
    isPublished: true,
    isStar: false,
    answerCount: 5,
    createdAt: "2023-01-01 10:00:00",
  },
  {
    _id: "q2",
    title: "问卷2",
    isPublished: false,
    isStar: false,
    answerCount: 0,
    createdAt: "2023-01-02 10:00:00",
  },
  {
    _id: "q3",
    title: "问卷3",
    isPublished: true,
    isStar: false,
    answerCount: 10,
    createdAt: "2023-01-03 10:00:00",
  },
  {
    _id: "q4",
    title: "问卷4",
    isPublished: false,
    isStar: false,
    answerCount: 0,
    createdAt: "2023-01-04 10:00:00",
  },
  {
    _id: "q5",
    title: "问卷5",
    isPublished: true,
    isStar: false,
    answerCount: 15,
    createdAt: "2023-01-05 10:00:00",
  },
  {
    _id: "q6",
    title: "问卷6",
    isPublished: false,
    isStar: true,
    answerCount: 0,
    createdAt: "2023-01-06 10:00:00",
  },
];
const List: FC = () => {
  const [list, setList] = useState([...questionList]);
  return (
    <div className={styles.list}>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>我的问卷</Title>
        </div>
        <div className={styles.right}>
          <input type="text" placeholder="搜索问卷" />
        </div>
      </div>
      <div className={styles.content}>
        <div className={styles.questionCardList}>
          {(list.length &&
            list.map((item) => <QuestionCard key={item._id} {...item} />)) || (
            <Empty description="暂无问卷" />
          )}
        </div>
      </div>
      <div className={styles.footer}>loadMore 上划加载更多...</div>
    </div>
  );
};

export default List;
